{% extends "help/index.html" %} 
{% block content %}

<h2>Code Tab</h2>
<table class="gs-nav"><tr>
  <td><a href="/help/">&lt; Help Index</a></td>
  <td style="text-align: right"><a href="/help/newstab">News Tab &gt;</a></td>
</tr></table>

<p>The Code Tab gives you an editing environment that allows you to write 
  OpenSocial JavaScript code to run against the current container.  
  
<img src="http://osda.appspot.com/img/codetab_1.png" class="center" />

<p>The Code Tab provides a toolbar to save and load your code samples.  When you
  first load the tab, you will notice a large text area 
  (<span class="reference">4</span>) containing sample
  OpenSocial code.  You can run this code by pressing the Execute 
  (<span class="reference">5</span>) 
  button.  To familiarize yourself with the OpenSocial APIs, try modifying
  the default code to perform different types of requests.</p>

<p>The code tab contains the following components:</p>
<ol>
  <li value="1"><span>The drop down list contains a list of samples that you have
    saved.  To load a sample, first select it from this list.</span></li>
  <li value="2"><span>Pressing the "Load" button will load the currently selected 
    sample and place its contents into the code textbox.</span></li>
  <li value="3"><img src="http://osda.appspot.com/img/codetab_2.png" class="right" />
    <span>Pressing the "Save code as" button will prompt you to save the 
    contents of the code textbox as a sample.</span></li>
  <li value="4"><span>The code textbox is where you will edit and run OpenSocial 
    code.</span></li>
  <li value="5"><span>The "Execute" button runs the code that is currently present
    in the code textbox.</span></li>
  <li value="6"><span>The "Larger" button will increase the size of the code textbox
    by a few lines per click.  Use this if you want more room to view your 
    code.</span></li>
  <li value="7"><span>The "Smaller" button will decrease the size of the code textbox
    by a few lines per click.</span></li>
  <li value="8"><span>At the bottom of the code textbox is a div element for use 
    by your code samples.  If you need to insert HTML or DOM nodes into the
    page, use this element.</span></li>
</ol>

<img src="http://osda.appspot.com/img/codetab_3.png" class="center" />


<h3>Code Tab API</h3>
<p>
  The Code Tab supplies a JavaScript API which you may use in your samples.  
  Here is a list of functions you may call from code in this section:
</p>

<table class="apilist">
  <tr>
    <th>cls</th>
		<td>
		  The <code>cls</code> method is shorthand for "CLear Screen".  Use this to 
		  clear the <code>output</code> buffer, as covered below.
		</td>
	</tr>
	<tr>
	  <th>output</th>
		<td>
		  Call the <code>output</code> method to print  
		  text.  <code>output</code> can take a variable number of arguments, 
		  so you can print several variables on the same line without needing 
		  to perform string concatenation yourself.  If you have firebug installed and 
		  enabled, <code>output</code> will also echo output to the firebug console,
		  meaning that you can inspect objects that you print using <code>output</code>
		  as well.
		</td>
	</tr>
</table>	

<table class="gs-nav bottom"><tr>
  <td><a href="/help/">&lt; Help Index</a></td>
  <td style="text-align: right"><a href="/help/newstab">News Tab &gt;</a></td>
</tr></table>
{% endblock %}